<!-- 库存量预警查询 -->
<template>
  <div class="mod-config">
    <el-button-group style="margin-bottom: 10px;">
      <el-button type="primary" icon="el-icon-search" @click="searchHandle">查询</el-button>
      <el-button type="primary" icon="el-icon-delete" @click="searchReset">清空</el-button>
    </el-button-group>
      <!-- 查询搜索框 -->
      <el-form inline :model="dataForm" @keyup.enter.native="searchHandle">
        <el-form-item label="商品代码">
          <el-input v-model="dataForm.code" placeholder="商品代码"></el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="dataForm.goodsName" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-form-item label="商品类别">
          <el-select v-model="dataForm.ctgId">
            <el-option v-for="item in ctgOption" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="仓位">
          <el-select v-model="dataForm.stockId">
            <el-option v-for="item in stockOption" :key="item.id" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="预警状态">
          <el-select v-model="dataForm.warningStatus" placeholder="预警状态">
            <el-option label="小于等于红色预警" value="1"></el-option>
            <el-option label="大于红色预警并小于等于库存量下限" value="2"></el-option>
            <el-option label="大于库存量下限并小于库存量上限" value="3"></el-option>
            <el-option label="大于库存量上限" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标准零售价格">
          <el-row>
            <el-col :span="11">
              <el-input v-model="dataForm.retailPriceMin" placeholder="价格下限"></el-input>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center;">-</el-col>
            <el-col :span="11">
              <el-input v-model="dataForm.retailPriceMax" placeholder="价格上限"></el-input>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <div class="avue-crud">
        <el-table :data="dataList" border v-loading="dataListLoading" style="color:#9f0050;" :max-height="tableHeight">
          <el-table-column prop="code" label="商品编码"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称" width="390"></el-table-column>
          <el-table-column prop="ctgId" label="类别" width="70">
           <template slot-scope="scope">
              {{ctgNameChange(scope.row.ctgId,scope.$index)}}
            </template>
          </el-table-column>
          <el-table-column prop="quantity" label="数量" width="55"></el-table-column>
          <el-table-column prop="stockName" label="仓位"></el-table-column>
          <el-table-column prop="inventoryTop" label="库存上限" width="80"></el-table-column>
          <el-table-column prop="inventoryFloor" label="库存下限" width="80"></el-table-column>
          <el-table-column prop="redAlert" label="红色预警" width="80"></el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next">
        </el-pagination>
      </div>
  </div>
</template>

<script>
  import {waringSearchGetList} from '@/api/eims/warning-search.js'
  import {mapGetters} from 'vuex'
  import { filterParams } from "@/util/tools";
  import {getCtgList} from "@/api/eims/ctg"
  import {getStockList} from "@/api/eims/stock"

  export default {
    data () {
      return {
        dataForm: {
          key: '',
          person: '',
          address: ''
        },
        dataList: [],
        ctgOption: [],
        stockOption: [],
        pageIndex: 1,
        pageSize: 200,
        totalPage: 0,
        dataListLoading: false,
        addOrUpdateVisible: false
      }
    },
    created () {
      this.getDataList(),
      this.getCtgInfoList(),
      this.getStockInfoList()
    },
    computed: {
      ...mapGetters(['permissions']),
      tableHeight: function(){
        return window.innerHeight - 260
      }
    },
    methods: {
      //  查询数据
      searchHandle() {
        this.pageIndex = 1
        this.getDataList()
      },
      //  清空搜索表单
      searchReset() {
        for (let key in this.dataForm) {
          this.dataForm[key] = "";
        }
      },
      // 获取数据列表
      getDataList () {
        let params1 = { current: this.pageIndex, size: this.pageSize };
        let params2 = filterParams(this.dataForm);
        this.dataListLoading = true
        waringSearchGetList(Object.assign(params1, params2)).then(response => {
          if(response.data.code == '0'){
            this.dataList = response.data.data.records
            this.totalPage = response.data.data.total
          }else{
            this.$message.error(response.data.msg)
          }
					this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      //获取商品类别信息
      getCtgInfoList(){
        getCtgList().then(response => {
          if(response.data.code == '0'){
            this.ctgOption = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      //
      ctgNameChange(id) {
        let obj = {}
        obj = this.ctgOption.find(item => {
          return item.id == id
        })
        if(obj && obj.name){
          return obj.name
        }
      },
      //获取仓库列表
      getStockInfoList(){
        getStockList().then(response => {
          if(response.data.code == '0'){
            this.stockOption = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      }
    }
  }
</script>
